﻿
@{
    ViewBag.Title = "商品编辑";
}
@section Css{
    <link href="~/Content/css/plugins/webuploader/webuploader.css" rel="stylesheet"/>
}
<div class="col-sm-12" style="padding-top: 10px;">
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <form class="form-horizontal m-t" id="form1">
                <div class="form-group">
                    <label class="col-sm-3 control-label">商品标题：</label>
                    <div class="col-sm-8">
                        <input id="goodsTitle" name="goodsTitle"  type="text" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">商品简介：</label>
                    <div class="col-sm-8">
                        <input id="goodsSummary" type="text" class="form-control" name="goodsSummary">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">商品链接：</label>
                    <div class="col-sm-8">
                        <input id="goodsUrl" type="text" class="form-control" name="goodsUrl">
                    </div>
                </div>
                <div class="form-group" style="height: 100px;">
                    <label class="col-sm-3 control-label">商品图片：</label>
                    <div class="col-sm-8">
                        <div id="filePicker" style="width: 100px; float: left">选择图片</div>
                        <img id="goodsFilePath" data-imgSrc=""  name="goodsFilePath" style="margin: 0 20px; float: left; width: 100px; height: 100px;" >
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-4 col-sm-offset-3 text-center">
                        <button id="btn_Submit" class="btn btn-primary" type="button">提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@section Js{
    <script src="/Content/js/plugins/webuploader/webuploader.min.js"></script>
    <script type="text/javascript">
        model = @MvcHtmlString.Create(ViewBag.Json);
        var filePath = '';
        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        var validator = $("#form1").validate({
            rules: {
                goodsTitle: {
                    required: true,
                    maxlength:50
                },
                goodsSummary: {
                    maxlength:100
                },
                goodsUrl: {
                    required: true,
                    url:true
                }
            },
            messages: {
                goodsTitle: {
                    required: "请输入商品标题"
                },
                goodsUrl: {
                    required: "请输入商品链接"
                }
            }
        });
        $(function() {
            //dataInit();
            $("#btn_Submit").click(function() {
                if (validator.form()) {
                    if (filePath == "") {
                        layer.msg("请上传图片", { icon: 5, time: 2000 });
                        return;
                    }
                    var parms = {
                        goodsId: model.goodsId,
                        goodsTitle: encodeURIComponent($.trim($("#goodsTitle").val())),
                        goodsSummary: encodeURIComponent($.trim($("#goodsSummary").val())),
                        goodsUrl: encodeURIComponent($.trim($("#goodsUrl").val())),
                        goodsFilePath: filePath
                    }
                    $.post("/Sale/GoodsSave", parms, function(json) {
                        if (json.result == "success") {
                            layer.msg(json.msg, { icon: 1, time: 2000 }, function(data) {
                                parent.location.reload();
                                parent.layer.close(index);
                            });
                        } else {
                            layer.msg(json.msg, { icon: 5, time: 2000 });
                        }
                    }, "json");
                }
            });

            $("#goodsFilePath").click(function() {
                if ($(this).attr("data-imgSrc") != undefined) {
                
                }
            });

        });
        // 初始化Web Uploader
        var uploader = WebUploader.create({

            // 选完文件后，是否自动上传。
            auto: true,
            // swf文件路径
            swf: '/Content/js/plugins/webuploader/Uploader.swf',
            // 文件接收服务端。
            server: '/Sale/FileUpload',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                id: '#filePicker',
                multiple: false
            },
            duplicate: true,
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png,image/gif,image/bmp' //修改这行
            }
        });

        // 当有文件添加进来的时候
        uploader.on('fileQueued', function(file) {
            var $img = $("#goodsFilePath");
            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb(file, function(error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr('src', src);
            }, 100, 100);
        });

        uploader.on('uploadSuccess', function(file, response) {
            if (response.result == "success") {
                filePath = response.filePath;
                $("#goodsFilePath").attr("data-imgSrc", response.filePath);
            }
        });

        uploader.on('uploadError', function(file) {
            $("#filePicker").after("<span>上传失败</span>");
        });


    </script>
}
